<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML标签示例</title>
</head>

<body>
  <!-- 表单 -->
  <form action="#" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" placeholder="请输入用户名">
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" placeholder="请输入密码">
    <br>
    <label for="">邮箱：<input type="text"></label>
    <br>
    <textarea name="message" id="message" cols="30" rows="5" placeholder="请输入多行文本"></textarea>
    <br>
    <select name="hobby" id="hobby">
      <optgroup label="兴趣爱好分组">
        <option value="reading">阅读</option>
        <option value="sports">运动</option>
      </optgroup>
    </select>
    <br>
    <input type="submit" value="提交">
  </form>

  <!-- 超链接 -->
  <a href="https://www.example.com" target="_blank">访问示例网站</a>

  <!-- 无序列表 -->
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>

  <!-- 有序列表 -->
  <ol>
    <li>第一项</li>
    <li>第二项</li>
  </ol>

  <!-- 音频 -->
  <audio controls>
    <source src="your_audio_file.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 标签。
  </audio>

  <!-- 视频 -->
  <video width="320" height="240" controls>
    <source src="your_video_file.mp4" type="video/mp4">
    您的浏览器不支持 video 标签。
  </video>

  <!-- 图像 -->
  <img src="your_image.jpg" alt="示例图片" width="200" height="150">

  <!-- div用于布局划分 -->
  <div style="border: 1px solid black; padding: 10px;">
    <p>这是div划分的一个区域内容。</p>
  </div>

  <!-- span用于行内内容 -->
  <p>这里是一段文本，其中<span style="color: red;">这部分</span>用span标签标记。</p>

  <!-- fieldset和legend用于表单分组 -->
  <fieldset>
    <legend>个人信息</legend>
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age">
  </fieldset>
</body>

</html>